<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>分析报表</h2>
                <ol class="breadcrumb">
                    <li>
                        消防用水管理系统
                    </li>
                    <li class="active">
                        分析报表
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">
            <div class="">
                <#include "./analysis_report_model.ftl" >
            </div>
        </div>

    <#include "./bottom_nav.ftl">
    </div>

</div>

<div class="modal inmodal" id="chartModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog"  style="width: 1000px;">
        <div class="modal-content animated bounceInDown">
            <div class="modal-header" style="padding: 0 0 0 0">
                <h4 id="chartModelHeaderTitle" class="modal-title"></h4>
            </div>
            <input id="monthID" type="text" style="display: none;">
            <div class="modal-body" style="padding: 5px 5px 5px 5px;">
                <div style="padding: 0 0 0 0;"><canvas id="barChartModel"></canvas></div>
            </div>
            <div class="modal-footer">
                <button <#if (role_type_id > 2)>disabled</#if> id="chartExport" type="button" class="btn btn-primary pull-left"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;导出</button>
                <button id="chartCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-close"></i>&nbsp;&nbsp;关闭</button>
            </div>
        </div>
    </div>
</div>

<#include "./js.ftl">

<script>
 /*   analysis_report_model js*/

 var report_year = 0;
 var overViewTable = $('#overViewTable').DataTable({
     language: {
         "sProcessing": "处理中...",
         "sLengthMenu": "显示 _MENU_ 项结果",
         "sZeroRecords": "没有匹配结果",
         "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
         "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
         "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
         "sInfoPostFix": "",
         "sSearch": "搜索IP:",
         "sUrl": "",
         "sEmptyTable": "表中数据为空",
         "sLoadingRecords": "载入中...",
         "sInfoThousands": ",",
         "oPaginate": {
             "sFirst": "首页",
             "sPrevious": "上页",
             "sNext": "下页",
             "sLast": "末页"
         },
         "oAria": {
             "sSortAscending": ": 以升序排列此列",
             "sSortDescending": ": 以降序排列此列"
         }
     },
     ajax: "${baseURL}/water/analysis_report/getAll?year=" + report_year,
     columns:[
         {"data":"month","render":function(data, type, row, meta){
            return data+"月";
          }},
         {"data":"month_all"},
         {"data":"month_confirm"},
         {"data":"month_alarm"},
         {"data":"month_rate","render":function(data, type, row, meta){
             var ret = data * 100;
             return ret.toFixed(2) + "%";
         }},
         {"data":"null","render":function(data, type, row, meta){
             var obj = encodeURIComponent(JSON.stringify(row));
             return '<div class="col-md-12" style="padding: 0 0 0 0;"><button type="button" data-toggle="modal" data-target="#chartModal" onclick='+"showMonth("+'"'+obj+'"'+")"+ '  class="btn btn-block btn-primary" style="padding: 0 0 0 0;">详&nbsp;情</button></div>'
         },"width":"15%"}
     ],
     ordering:true,
     searching:false,
     bLengthChange:false,
     info:false,
     paging:false
 });


 function showMonth(obj){
     var month = JSON.parse(decodeURIComponent(obj)).month;
     var year = $("#yearSelect").val();
     $("#monthID").val(month);
     $("#chartModelHeaderTitle").html(year+"年"+month+"月记录")
     $.ajax({
         type: "POST",
         contentType: "application/x-www-form-urlencoded",
         dataType: "json",
         url: "${baseURL}/water/analysis_report/getMonth",
         data: {"year":year,"month":month},
         async: false,
         success:function(data){
             if(data.code === 0){
                 {
                     var label = [];
                     var datas = [];
                     var alarm_datas = [];
                     var confirm_datas = [];
                     var showArr = [];
                     for (var i in data.data) {
                         label.push(data.data[i].day + "日");
                     }
                     for (var i in data.data) {
                         alarm_datas.push(data.data[i].day_alarm);
                     }
                     for (var i in data.data) {
                         confirm_datas.push(data.data[i].day_confirm);
                     }
                     for (var i in data.data) {
                         datas.push(data.data[i].day_all);
                     }
                     $("#chartModal").on('shown.bs.modal',function(event){
                         var barData = {
                             labels: label,
                             datasets: [
                                 {
                                     label: "未处理",
                                     fillColor: "rgba(255, 0, 51,0.5)",
                                     strokeColor: "rgba(255, 0, 51,0.8)",
                                     highlightFill: "rgba(255, 0, 51.75)",
                                     highlightStroke: "rgba(255, 0, 51,1)",
                                     data: alarm_datas
                                 },
                                 {
                                     label: "已确认",
                                     fillColor: "rgba(26,179,148,0.5)",
                                     strokeColor: "rgba(26,179,148,0.8)",
                                     highlightFill: "rgba(26,179,148,0.75)",
                                     highlightStroke: "rgba(26,179,148,1)",
                                     data: confirm_datas
                                 },
                                 {
                                     label: "报警数量",
                                     fillColor: "rgba(248, 172, 89,0.5)",
                                     strokeColor: "rgba(248, 172, 89,0.8)",
                                     highlightFill: "rgba(248, 172, 89,0.75)",
                                     highlightStroke: "rgba(248, 172, 89,1)",
                                     data: datas
                                 }
                             ]
                         };
                         var barOptions = {
                             scaleBeginAtZero: true,
                             scaleShowGridLines: true,
                             scaleGridLineColor: "rgba(0,0,0,.05)",
                             scaleGridLineWidth: 1,
                             barShowStroke: true,
                             barStrokeWidth: 2,
                             barValueSpacing: 5,
                             barDatasetSpacing: 1,
                             responsive: true,
                             multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}
                         }
                         var ctx = document.getElementById("barChartModel").getContext("2d");
                         var myNewChart = new Chart(ctx).Bar(barData, barOptions);
                     })

                 }
             }
             else{
                 swal({
                     title: "操作失败。",
                     type: "error"
                 })
             }
         },
         error:function(xhr, status, error){
             console.log(xhr.responseText);
             swal({
                 title: "网络错误。",
                 type: "error"
             })
         }
     });
 }

 $("#yearExportBtn").click(function () {
     var year = $("#yearSelect").val();
     var tail = document.documentURI.substring(7);
     var server = tail.substring(0, tail.indexOf("/"));
     var urlAddr = "http://"+server+"${baseURL}/water/export/year?year=" + year;
     window.open(urlAddr);
 });

 $("#chartExport").click(function () {
     var year = $("#yearSelect").val();
     var month = $("#monthID").val();
     var tail = document.documentURI.substring(7);
     var server = tail.substring(0, tail.indexOf("/"));
     var urlAddr = "http://"+server+"${baseURL}/water/export/month?year=" + year +"&month=" + month;
     window.open(urlAddr);
 });

function showChart(year){
    $.ajax({
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        url: "${baseURL}/water/analysis_report/getAll?year=" + year,
        success:function(data){
            if (data.code !== 0) {
            } else {
                var label = [];
                var datas = [];
                var alarm_datas = [];
                var confirm_datas = [];
                var showArr = [];
                for (var i in data.data) {
                    label.push(data.data[i].month + "月");
                }
                for (var i in data.data) {
                    alarm_datas.push(data.data[i].month_alarm);
                }
                for (var i in data.data) {
                    confirm_datas.push(data.data[i].month_confirm);
                }
                for (var i in data.data) {
                    datas.push(data.data[i].month_all);
                }
                var barData = {
                    labels: label,
                    datasets: [
                        {
                            label: "未处理",
                            fillColor: "rgba(255, 0, 51,0.5)",
                            strokeColor: "rgba(255, 0, 51,0.8)",
                            highlightFill: "rgba(255, 0, 51.75)",
                            highlightStroke: "rgba(255, 0, 51,1)",
                            data: alarm_datas
                        },
                        {
                            label: "已确认",
                            fillColor: "rgba(26,179,148,0.5)",
                            strokeColor: "rgba(26,179,148,0.8)",
                            highlightFill: "rgba(26,179,148,0.75)",
                            highlightStroke: "rgba(26,179,148,1)",
                            data: confirm_datas
                        },
                        {
                            label: "报警数量",
                            fillColor: "rgba(248, 172, 89,0.5)",
                            strokeColor: "rgba(248, 172, 89,0.8)",
                            highlightFill: "rgba(248, 172, 89,0.75)",
                            highlightStroke: "rgba(248, 172, 89,1)",
                            data: datas
                        }
                    ]
                };
                var barOptions = {
                    scaleBeginAtZero: true,
                    scaleShowGridLines: true,
                    scaleGridLineColor: "rgba(0,0,0,.05)",
                    scaleGridLineWidth: 1,
                    barShowStroke: true,
                    barStrokeWidth: 2,
                    barValueSpacing: 5,
                    barDatasetSpacing: 1,
                    responsive: true,
                    multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}
                }
                var ctx = document.getElementById("barChart").getContext("2d");
                var myNewChart = new Chart(ctx).Bar(barData, barOptions);
            }
        },
        error:function(xhr, status, error){
            swal({
                title: "网络错误。",
                type: "error"
            })
        }
    });
}

 $(function(){
     var years = [];
     var currentYear = (new Date()).getFullYear();
     for(var i = 0; i < 5; i++){
         years.push({"id":currentYear - i,"text":currentYear - i + "年份"});
     }
     $("#yearSelect").select2({
         language: {
             "noResults": function () {
                 return "没有数据";
             }
         },
         allowClear:false,
         placeholder: "请选择年份",
         data: years
     });
     $("#yearSelect").on('change',function(){
         report_year = $("#yearSelect").val();
         overViewTable.ajax.url("${baseURL}/water/analysis_report/getAll?year=" + report_year).load();
         showChart(report_year);
     });
     showChart(report_year);
 });

</script>
</body>
</html>